<div class="btn-toolbar d-flex" role="group" aria-label="">
    <div ng-if="$ctrl.createUrl" class="btn-group flex-fill" role="group" aria-label="Basic example">
        <a ng-if="$ctrl.createUrl" href="{{$ctrl.createUrl}}" class="btn btn-primary text-white m-0 mb-3">
            <i class="fas fa-plus"></i> {{$ctrl.createText}}
        </a>
    </div>
</div>
<div ng-init="$ctrl.init()" class="row">
    <div class="col-12">
        <div class="input-group mb-3">
            <div class="input-group-text" id="btnGroupAddon" ng-click="$ctrl.apply(0)">
                <i class="mi mi-Search" style="top: 0"></i>
            </div>
            <input ng-model="$ctrl.request.keyword" ng-enter="$ctrl.apply(0)" type="text" class="form-control"
                placeholder="Search keyword..." aria-label="Search keyword..." aria-describedby="btnGroupAddon" />
        </div>
    </div>
    <div class="col-12">
        <div class="input-group mb-3">
            <select class="form-select" ng-model="$ctrl.request.status" ng-change="$ctrl.apply(0)">
                <option selected value="">All status</option>
                <option ng-repeat="item in $ctrl.statuses track by $index" value="{{item.value}}">
                    {{item.title}}
                </option>
            </select>

            <select class="form-select" ng-model="$ctrl.request.orderBy" ng-change="$ctrl.apply(0)">
                <option ng-repeat="item in $ctrl.orders track by $index" value="{{item.value}}">
                    {{item.title}}
                </option>
            </select>
        </div>
    </div>

    <div class="col-12">
        <div class="input-group mb-3">
            <select class="form-select" ng-model="$ctrl.request.direction" ng-change="$ctrl.apply(0)">
                <option ng-repeat="item in $ctrl.directions track by $index" value="{{item.value}}">
                    {{item.title}}
                </option>
            </select>
            <select class="form-select" ng-model="$ctrl.request.pageSize" ng-change="$ctrl.apply(0)">
                <option ng-repeat="item in $ctrl.pageSizes track by $index" value="{{item}}">
                    {{item}}
                </option>
            </select>
        </div>
    </div>

    <div class="col-12">
        <div class="input-group">
            <input type="date" data-date-format="dd.MM.yyyy" ng-model="$ctrl.dateRange.fromDate" class="form-control"
                ng-change="$ctrl.updateDate()" />
            <input type="date" data-date-format="dd.MM.yyyy" ng-model="$ctrl.dateRange.toDate" class="form-control"
                ng-change="$ctrl.updateDate()" />
        </div>
    </div>
</div>